<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				background: #f5f5f5;
				color: #333333;
			}
			.main{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.rBtn{
				color: #c6a05f;
			}
			.num{
				width: 87%;
				color: #999999;
				padding: 6vw 3.2%;
				margin-top: 3.2vw;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				background: url(../imgs/jf_banner.png) no-repeat 100% 100%;
				background-size: 100% 100%;
				border-radius: 2vw;
			}
			.num>div:nth-child(1)>div{
				font-size: 8vw;
				margin-top: 2.8vw;
				color: #c6a05f;
			}
			.num>div:nth-child(1)>div span{
				font-size: 3.8vw;
				margin-left: 3.2vw;
			}
			.tit{
				width: 92%;
				padding-top: 2vw;
				color: #999999;
			}
			/* 列表 */
			.content{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.list{
				width: 88%;
				padding: 3.2vw;
				display: flex;
				flex-direction: column;
				background: white;
				border-radius: 2vw;
				margin-top: 2vw;
			}
			.list>div{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
			.list:last-child{
				border-bottom: none;
			}
			.list>div:nth-child(2){
				margin-top: 1vw;
				font-size: 3.2vw;
				color: #999999;
			}
			/* .list>div:nth-child(2)>div:nth-child(2){
				color: #999999;
			} */
			.jsImg{
				width: 100%;
				margin-top: 3.2vw;
			}
			.state1{
				color: #FF4443;
				text-align: center;
				border-radius: 20vw;
			}
			.state2{
				color: #39b54a;
				text-align: center;
				border-radius: 20vw;
			}
			.move{
				color: #999999;
				padding: 3vw;
				font-size: 3.2vw;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<script type="text/html" id="num">
				<div>总积分
					<div>{{userIntegral}}<span>积分</span></div>
				</div>
				<div class="rBtn">积分说明</div>
			</script>
			<div class="num"></div>
			<!-- <div class="num">
				<div>我的积分：100</div>
				<div class="rBtn">积分说明</div>
			</div> -->
			<div class="tit">积分信息</div>
			<script type="text/html" id="content">
				{{each}}
				<div class="list">
					<div>
						<div>{{$value.storeName}}</div>
						<div class="{{$value.type== 1 ? 'state2' : 'state1'}}">{{$value.type== 1 ? '+'+$value.integral : '-'+$value.integral}}</div>
					</div>
					<div>
						<div>{{$value.createdTime}}</div>
						<div>{{$value.remark}}</div>
					</div>
				</div>
				{{/each}}
			</script>
			<div class="content"></div>
			<div class="move">查看更多</div>
			<!-- <div class="content">
				<div class="list">
					<div>
						<div class="state2">增加</div>
						<div>1积分</div>
					</div>
					<div>
						<div>签到送积分</div>
						<div>2021-04-20 10:22:22</div>
					</div>
				</div>
				<div class="list">
					<div>
						<div class="state1">减少</div>
						<div>1积分</div>
					</div>
					<div>
						<div>签到送积分</div>
						<div>2021-04-20 10:22:22</div>
					</div>
				</div>
			</div> -->
			<script type="text/html" id="jsImg">
				<img class="jsImg" src="{{integralDescription}}" >
			</script>
			<div class="jsImg"></div>
			<!-- <img class="jsImg" src="../imgs/xqimg.jpg" > -->
		</div>
		<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		$(function(){
			var auth_code = GetQueryString("auth_code");
			var customer_code = GetQueryString("customer_code");
			var state=1,pageNum=1,pageSize=10,list,hasNextPage   //切换状态
			state = parseInt(GetQueryString("flag"));
			$('body .rBtn').text('123123123')
			if (auth_code != null && customer_code != null) {
				var datas = {pageNum:pageNum,pageSize:pageSize,authCode:auth_code,customerCode:customer_code};
				// alert(auth_code);
				// alert(customer_code);
			} else {
				var datas = {pageNum:pageNum,pageSize:pageSize};
			}
			myAjax('get','/api/alipay/myIntegral',datas,function(res){
				if(res.code==200){
					//dataJson['data']=res.data[0].productList
					var html = template('content',res.data.pageInfo.list);
					list=res.data.pageInfo.list
					$(".content").append(html);
					var num = template('num',res.data);
					$(".num").append(num);
					var jsImg = template('jsImg',res.data);
					$(".jsImg").append(jsImg);
					hasNextPage = res.data.pageInfo.hasNextPage
					pageNum=2
					if(state){
						$('.num .rBtn').html('积分明细')
						state=0
						//alert('1')
						$('.content').hide()
						$('.jsImg').show()
						$('.move').hide()
						$('.tit').hide()
					}else{
						$('.num .rBtn').html('积分说明')
						state=1
						$('.content').show()
						$('.jsImg').hide()
						$('.tit').show()
						if(hasNextPage){
							$('.move').show()
						}else{
							$('.move').hide()
						}
					}
				}else{
					alert(res.data)
				}
			})
			
			
			
			$('.num').on('click','.rBtn',function(){
				//alert(state)
				if(state){
					$(this).html('积分明细')
					state=0
					//alert('1')
					$('.content').hide()
					$('.jsImg').show()
					$('.move').hide()
					$('.tit').hide()
				}else{
					$(this).html('积分说明')
					state=1
					$('.content').show()
					$('.jsImg').hide()
					$('.tit').show()
					if(hasNextPage){
						$('.move').show()
					}else{
						$('.move').hide()
					}
				}
				//alert(state)jsImg
			})
			$('.move').on('click',function(){
				if (hasNextPage) {
					myAjax('get','/api/alipay/myIntegral',{pageNum:pageNum,pageSize:pageSize},function(res){
						if(res.code==200){
							//dataJson['data']=res.data[0].productList
							var list1 = list.concat(res.data.pageInfo.list)
							list=list1
							//console.log(list)
							var html = template('content',list);
							
							$(".content").html(html);
							hasNextPage=res.data.pageInfo.hasNextPage
							pageNum++
							if(res.data.pageInfo.hasNextPage){
								$('.move').show()
							}else{
								$('.move').hide()
							}
						}else{
							alert(res.data)
						}
					})
				}else{
					alert('没有更多数据')
				}
				
			})
		})

		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		}
	</script>
</html>
